<template>
  <div id="home">
    <navbar class="home-nav">
      <!-- <div slot="center">Shoping Go~~~</div> #center = v-slot:center-->
      <template #center>Shopping Go</template>
    </navbar>
    <home-swiper :banners="banners" />
    <recommend-view :recommends="recommends" />
    <feature-view></feature-view>
    <tab-contorl class="tabContorl-item" :titles="['流行','新款','精选']" @tabClick='tabClick' />
    <goods-list :goods="goods[currentType].list" />
  </div>
</template>

<script>
  import HomeSwiper from "./childrenComps/HomeSwiper"
  import FeatureView from "./childrenComps/FeatureView.vue"
  import recommendView from "./childrenComps/RecommendView.vue"

  import Navbar from "../../components/common/navbar/Navbar.vue"
  import tabContorl from "../../components/content/TabContorl/tabContorl.vue"
  import GoodsList from '../../components/content/Goods/GoodsList.vue';

  import {
    getHomeMultidata,
    getHomeGoods
  } from "../../network/index"
  export default {
    name: 'index',
    components: {
      HomeSwiper,
      FeatureView,
      recommendView,
      Navbar,
      tabContorl,
      GoodsList
    },
    data() {
      return {
        // 保存函数里面的数据，要不然函数执行完成后会释放数据
        banners: [],
        recommends: [],
        goods: {
          "pop": {
            page: 0,
            list: []
          },
          "new": {
            page: 0,
            list: []
          },
          "sell": {
            page: 0,
            list: []
          }
        },
        currentType: 'pop'
      }
    },
    created() {
      this.getHomeMultidata()
      // 2.请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    methods: {
      /* 事件监听相关方法 */
      tabClick(index) {
        switch (index) {
          case 0:
            this.currentType = 'pop'
            // break 阻止穿透，跳出循环
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
      },
      /* 网络请求相关方法 */
      getHomeMultidata() {
        // 1.请求首页的相关数据
        getHomeMultidata().then(res => {
          // 保存函数里面的数据，要不然函数执行完成后会释放数据
          // this.banners = res.data.data.banner.list
          const {
            banner,
            recommend
          } = res.data.data
          this.banners = banner.list
          this.recommends = recommend.list
          console.log(res);
        })
      },
      getHomeGoods(type) {
        const page = this.goods[type].page + 1 //滚动条下滑到一定位置的时候，调用这个函数，取下一页的数据
        getHomeGoods(type, page).then(res => {
          // console.log(res);
          // 把请求回来的数据都放在list数组里面
          this.goods[type].list.push(...res.data.data.list)
          this.goods[type].page += 1 //请求结束后页面加一，因为请求前世第一页，而请求后是第二页
        })
      }
    }
  }
</script>

<style scopde lang="less">
  #home {
    padding-top: 44px;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: rgb(221, 214, 186);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .tabContorl-item {
    position: sticky;
    top: 44px;
    background-color: #fff;
    z-index: 9;
  }
</style>